<template>
  <div class="setting-index">
    <div class="setting-container">
      <el-container>
        <el-aside width="230px">
          <el-menu :default-active="curPath" class="setting-menu-vertical" router>
            <el-menu-item v-for="(item,index) in funMenu" :key="index" :index="'/setting/' + item.path">
              <span class="menu-icon" :style="{'background': item.meta.background}">
                <i class="iconfont" v-html="item.meta.icon"></i>
              </span>
              <span>{{ item.meta.title }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <el-scrollbar style="flex: 1;">
            <div class="layout-main">
              <router-view v-slot="{ Component }">
                <transition name="fade-right" mode="out-in">
                  <component :is="Component"></component>
                </transition>
              </router-view>
            </div>
          </el-scrollbar>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script setup>
/* eslint-disable */
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const funMenu = computed(() => {
  const { routes } = router.options
  let menu = []
  menu = routes[0].children.filter(item => item.name === 'setting')[0].children
  return menu
})
console.log(funMenu.value, 7777)
const curPath = computed(() => router.currentRoute.value.path)

</script>

<style lang='scss' scoped>
.setting-index{
  .setting-container{
    .menu-icon{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      width: 24px;
      height: 24px;
      border-radius: 4px;
      color: #ffffff;
      i{
        font-size: 18px;
      }
    }
  }
}
::v-deep .el-main{
  display: flex;
  overflow: hidden;
  --el-main-padding: 0;
  background: #f8f8f8;
  height: calc(100vh - 56px);
  .layout-main{
    padding: 10px;
    box-sizing: border-box;
  }
}
::v-deep .el-aside{
  height: calc(100vh - 56px);
  background: #f8f8f8;
  .setting-menu-vertical{
    padding-top: 12px;
    min-height: calc(100vh - 56px);
    background: #f8f8f8;
    .el-menu-item{
      margin: 0 4px 4px;
      height: 40px;
      &:hover{
        background-color: rgba( 64, 158, 255 , .1);
      }
    }
    .el-menu-item.is-active{
      background-color: rgba( 64, 158, 255 , .1);
    }
  }
}
// 进入后和离开前保持原位
.fade-right-enter-to,
.fade-right-leave-from{
  opacity: 1;
  transform: none;
}

// 设置进入和离开过程中的动画时长0.5s
.fade-right-enter-active,
.fade-right-leave-active
{
  transition: all 0.5s;
}

// 进入前和离开后为透明，并在右侧20px位置
.fade-right-enter-from,
.fade-right-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
</style>